<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <title>Document</title>
</head>
<body>
  <button id="btnGET">GET</button>
  <button id="btnPOST">POST</button>
  <button id="btnDEL">DELETE</button>
  <button id="btnJSONP">JSONP</button>
  <script>
    $(function(){
      //1.测试GET接口
      $('#btnGET').on('click',function(){
        $.ajax({
          type:'GET',
          url:'http://127.0.0.1/api/get',
          data:{name:'zs',age:20},
          success:function(res){
            console.log(res);
          }
        })
      })
      //2.测试POST接口
      $('#btnPOST').on('click',function(){
        $.ajax({
          type:'POST',
          url:'http://127.0.0.1/api/post',
          data:{bookname:'三国演义',author:'罗贯中'},
          success:function(res){
            console.log(res);
          }
        })
      })

      //3.为删除按钮绑定点击事件处理函数
      $('#btnDEL').on('click',function(){
        $.ajax({
          type:'DELETE',
          url:'http://127.0.0.1/api/delete',
          success:function(res){
            console.log(res);
          }
        })
      })

      //JSONP接口
      $('#btnJSONP').on('click',()=>{
        $.ajax({
          type:'GET',
          url:'http://127.0.0.1/api/jsonp',
          dataType:'jsonp',
          success:function(res){
            console.log(res);
          }
        })
      })
    })
  </script>
</body>
</html>